import QtQuick 2.15
import QtGraphicalEffects 1.15
import QtQuick.Controls 2.15
import QtMultimedia 5.15
//风之琴的每一个按键的


Rectangle {
    id:root
    property  alias text:t.text
    property int nodeIndex: 0
    implicitHeight: 100
    width:height
    focus:true
    radius:height/2
    color:"#fff9ef"
    //按下音符
    function onNodePressed(){
        root.color="#63aea7";
        se.play();
//        switch(nodePlayer.playbackState){
//            case MediaPlayer.StoppedState:
//            case MediaPlayer.PausedState:
//                nodePlayer.play();
//                break;
//            case MediaPlayer.PlayingState:
//                nodePlayer.seek(0)
//                break;
////           	default:
////                break;
//        }

    }
    //松开音符
    function onNodeReleased(){
        root.color="#fff9ef";
    }
    Keys.onPressed: {
        if(event.key===text.charCodeAt(0))
        {
            root.onNodePressed();
            event.accepted=true;
        }
    }
    Keys.onReleased:  {
        if(event.key===text.charCodeAt(0))
        {
            root.onNodeReleased();
            event.accepted=true;
        }
    }
    SoundEffect {
        id:se
        source: `qrc:/music/node_${text}_WAV.wav`
    }
//    MediaPlayer {
//        id:nodePlayer
//        autoLoad: true
//        audioRole: MediaPlayer.GameRole
//        source: `qrc:/music/node_${text}.mp3`
//    }

    MouseArea {
        anchors.fill: parent
        onPressed: root.onNodePressed()
        onReleased: root.onNodeReleased()
    }
    Image {
        id:border
        anchors.fill:parent
        source:"qrc:/svg/gs_border.svg"
        mipmap: true
    }
    Image {
        id:node
        anchors.horizontalCenter: parent.horizontalCenter
        width: root.width*0.8
        height: root.height*0.8
        mipmap: true
        y:root.height*0.1
        source: `qrc:/svg/gs_node${root.nodeIndex}.svg`
        ColorOverlay {
            anchors.fill: node
            source: node
            color:"#63aea7"
        }
    }
    Text {
        id:t
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: node.bottom
        text : "K"
        font.pointSize: 16
        font.weight: Font.Black
        color:"#aaaa82"
        font.family: "Bonobo"
    }
}
